<template>
  <div class="container">
    <div class="form-box">
      <div class="back-box">
        <div class="btn-back" @click="goBack">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </div>
        <div class="line"></div>
        <div class="name">新建自动回复</div>
      </div>
      <div class="form-item-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="消息类型" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择">
              <div v-for="item in type" :key="item.name">
                <el-option :label="item.name" :value="item.id"></el-option>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="触发关键字" v-show="ruleForm.type === 'text'">
            <el-input v-model="ruleForm.rule" placeholder="请输入触发关键字"></el-input>
            <span style="color: rgba(0,0,0,.4);margin-left: 8px;"><i class="el-icon-info"></i>支持正则表达式</span>
          </el-form-item>
          <div v-show="ruleForm.type === 'event'">
            <el-form-item label="事件">
              <el-select v-model="ruleForm.event_type" placeholder="请选择">
                <el-option label="用户关注" value="subscribe"></el-option>
                <el-option label="自定义菜单事件" value="CLICK"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事件key">
              <el-input v-model="ruleForm.event_key" placeholder="请输入触发关键字" style="width: 340px"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="回复内容" prop="reply_content">
            <el-input
              type="textarea"
              style="width: 560px;"
              rows="4"
              placeholder="请输入回复内容"
              v-model="ruleForm.reply_content">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom-menus-box">
        <button class="el-button el-button--primary" @click="saveClick('ruleForm')">保存</button>
        <button class="el-button el-button--default" @click="goBack">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { messageType, addAutoReply } from '@/network/operate'

export default {
  data() {
    return {
      ruleForm: {
        event_key: null,
        event_type: null,
        reply_content: '',
        rule: null,
        type: ''
      },
      rules: {
        type: [{ required: true, message: "消息类型不能为空", trigger: "blur" }],
        reply_content: [{ required: true, message: "回复内容不能为空", trigger: "blur" }]
      },
      type: []
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    saveClick(formName) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          const { status, message } = await addAutoReply(this.ruleForm)
          if(status === 0) {
            this.$router.push({ path: '/wechat/messagereply/index' })
            this.$message.success('成功')
          }else {
            this.$message.error(message)
          }
        }
      })
    }
  },
  async created() {
    const { data } = await messageType()
    this.type = data.types
  }
}
</script>

<style lang='scss' scoped>
.container {
  flex: 1;
  height: 100%;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;
  .form-box {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-box {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
      .btn-back:hover {
        color: #409eff;
      }
      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin: 0 15px;
      }
      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .form-item-box {
      ::v-deep .el-form {
        margin-bottom: 22px;
        .photo {
          display: flex;
          .proposal {
            margin-left: 10px;
            span {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .img-box {
          margin-left: 100px;
          img {
            width: 100px;
            height: 100px;
          }
        }
      }
      ::v-deep .el-form-item__label {
        width: 200px !important;
      }
      .el-input {
        width: 200px;
      }
      ::v-deep .el-form-item__error {
        left: 100px;
      }
    }
    .bottom-menus-box {
      position: fixed;
      bottom: 0;
      left: 200px;
      right: 0;
      z-index: 2000;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      background-color: #fff;
      display: flex;
      box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
      button:last-child {
        margin-left: 24px;
      }
    }
  }
}
</style>